<template>
  <div class="image">
    <div class="header">
      <div class="router">
        <div class="route" v-for="(item,index) in routeList" :key="index">
          <div class="router-view" @click="toPath($event,item.url)" v-if="index === 0">
            <img class="back" id="back" src="../../assets/zhome/back.png" alt />
            <span class="border"></span>
            <img class="back" src="../../assets/zhome/home.png" alt />
            <span class="title">{{ item.title }}</span>
          </div>
          <div class="router-next" @click="toPath($event,item.url)" v-else>
            <span class="bor" :class="index !== routeList.length - 1 ? 'gey':''"></span>
            <span class="title">{{ item.title }}</span>
          </div>
          <img
            v-if="index !== routeList.length - 1"
            class="icon-right"
            src="../../assets/zhome/right.png"
            alt
          />
        </div>
      </div>
    </div>
    <div class="image-content">
      <div class="image-content-h1">
        图像检索
        <span>支持检索全球商标</span>
      </div>
      <div class="upload">
        <img class="img" src="../../assets/zhome/upload.png" alt />
        <div class="t1">将图像拖到此处</div>
        <div class="p">
          或点击上传 最多可上传1张图片 可使用Ctrl+V粘贴或
          <span>历史记录</span>选择
        </div>
        <div class="btn">
          <el-button color="#0052D9" type="primary">立即订购</el-button>
        </div>
      </div>
      <div class="contentd">
        <div class="div">
          <div class="title">主要信息</div>
          <div class="div-view">
            <el-select v-model="value" placeholder="AND" style="width: 320px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="div-view" style="flex: 1">
            <el-input v-model="input" placeholder="可输入关键词，公司名称，或者专利号" />
          </div>
          <div class="div-view">
            <el-select v-model="value" placeholder="关键词助手" style="width: 210px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <img class="add" src="../../assets/zhome/add.png" alt />
        </div>

        <!-- 文本 -->
        <div class="div">
          <div class="title">文本</div>
          <div class="div-view">
            <el-select v-model="value" placeholder="AND" style="width: 150px;margin-right: 20px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" placeholder="标题" style="width: 150px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="div-view" style="flex: 1">
            <el-input v-model="input" placeholder="例如 电动汽车 OR充电桩" />
          </div>
          <div class="div-view">
            <el-select v-model="value" placeholder="关键词助手" style="width: 210px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <img class="add" src="../../assets/zhome/add.png" alt />
        </div>

        <!-- 公司法人 -->
        <div class="div">
          <div class="title">公司&人</div>
          <div class="div-view">
            <el-select v-model="value" placeholder="AND" style="width: 150px;margin-right: 20px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" placeholder="当前权利人" style="width: 150px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="div-view" style="flex: 1">
            <el-input v-model="input" placeholder="例如 华为 OR 中兴" />
          </div>
          <div class="div-view">
            <el-select v-model="value" placeholder="关键词助手" style="width: 210px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <img class="add" src="../../assets/zhome/add.png" alt />
        </div>

        <!--分类 -->
        <div class="div">
          <div class="title">分类</div>
          <div class="div-view">
            <el-select v-model="value" placeholder="AND" style="width: 150px;margin-right: 20px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" placeholder="LOC分类号" style="width: 150px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="div-view" style="flex: 1">
            <el-input v-model="input" placeholder="例如 12-04 OR 12-08" />
          </div>
          <div class="div-view">
            <el-select v-model="value" placeholder="关键词助手" style="width: 210px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <img class="add" src="../../assets/zhome/add.png" alt />
        </div>

        <div class="div">
          <div class="title">日期</div>
          <div class="div-view">
            <el-select v-model="value" placeholder="AND" style="width: 150px;margin-right: 20px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" placeholder="申请日" style="width: 150px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="div-view">
            <el-select v-model="value" placeholder="某时间段" style="width: 240px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="div-view" style="flex: 1">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="年/月/日"
              end-placeholder="年/月/日"
            />
          </div>
          <div class="div-view">
            <el-select v-model="value" placeholder="关键词助手" style="width: 210px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <img class="add" src="../../assets/zhome/add.png" alt />
        </div>
      </div>
      <div class="font">
        <el-button type="info">清空</el-button>
        <el-button color="#0052D9" type="primary">搜索</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
const router = useRouter();
const route = useRoute();
let routeList = ref([
  { title: "首页", url: "/home" },
  { title: "查商标", url: "/trademark/index" },
  { title: "图像检索" }
]);
const back = () => {
  router.go(-1);
};

const toPath = (e, url) => {
  let id = e.target.id;
  console.log(id);
  if (id === "back") {
    back();
    return;
  }
  if (!url) {
    return;
  }
  router.push(url);
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条宽度 */
}

/* 水平滚动条样式 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 设置滑道背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: #aaa; /* 设置滑块背景色 */
  border-radius: 4px; /* 设置滑块圆角 */
}

/* 垂直滚动条样式 */
::-webkit-scrollbar-corner {
  display: none; /* 去除交叉点 */
}

/* Firefox浏览器支持 */
@supports (-moz-appearance: none) {
  ::-moz-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
  }

  ::-moz-scrollbar-track {
    background-color: #f5f5f5; /* 设置滑道背景色 */
  }

  ::-moz-scrollbar-thumb {
    background-color: #aaa; /* 设置滑块背景色 */
    border-radius: 4px; /* 设置滑块圆角 */
  }
}
.image {
  height: 100%;
  background-color: #f5f7fa;
  padding: 0 240px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;

  .contentd {
    padding: 20px 0 57px;
    .div {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      &-view {
        margin-right: 20px;
        ::v-deep .el-input__wrapper {
          width: 100%;
          // margin-right: 20px;
        }
      }
      .add {
        width: 16px;
        height: 16px;
      }
    }
    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      color: #202020;
      line-height: 22px;
      width: 4em;
      flex-shrink: 0;
      margin-right: 20px;
    }
  }
  .header {
    width: calc(100% - 240px);
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 240px;
    position: fixed;
    background-color: #f5f7fa;
    top: 110px;
    left: 0;
  }
  &-content {
    flex: 1;
    background: #ffffff;
    margin-bottom: 60px;
    padding: 72px 20px 0;
    .font {
      width: calc(100% + 20px);
      border-top: 1px solid #d6dce0;
      height: 72px;
      transform: translateX(-20px);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 20px;
      .el-button--info {
        width: 80px;
        height: 36px;
        background: #f5f6f8;
        border: none;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #202020;
      }
      .el-button--primary {
        width: 80px;
        height: 36px;
        border-radius: 2px;
      }
    }
    .upload {
      padding: 60px 0 68px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid #d6dce0;
      border-radius: 2px;
      margin: 20px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      .btn {
        margin-top: 22px;
        .el-button--primary {
          width: 120px;
          height: 40px;
          border-radius: 2px;
        }
      }
      .img {
        width: 80px;
        height: 80px;
      }
      .t1 {
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        color: #202020;
        line-height: 22px;
        padding: 30px 0 16px;
      }
      .p {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #646770;
        line-height: 22px;
        span {
          color: #0052d9;
          cursor: pointer;
        }
      }
    }
    &-h1 {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #202020;
      span {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #646770;
        padding-left: 10px;
      }
    }
  }
}

.router {
  display: flex;
  .title {
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #575966;
  }
  .route {
    display: flex;
    align-items: center;
    .icon-right {
      width: 10px;
      height: 10px;
      margin: 0 10px;
    }
  }
  &-next {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .bor {
      width: 6px;
      height: 6px;
      background: #0052d9;
      border-radius: 3px;
      margin-right: 10px;
    }
    .gey {
      background: #575966;
    }
  }
  &-view {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .border {
      width: 1px;
      height: 10px;
      background: #d8d8d8;
      margin: 0 12px;
    }
    .title {
      margin-left: 10px;
    }
    .back {
      width: 14px;
      height: 14px;
    }
  }
}
</style>